<template>
  
  <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left:30px;margin-top:20px">
    <el-tab-pane>
      <span slot="label">
        <svg-icon icon-class="shoucang" />{{"\xa0\xa0"}}全部订单</span>

      <el-table :data="allOrders" style="width: 100%">
        <el-table-column prop="groupName" label="订单信息" width="450">
          <template slot-scope="scope">
            <el-tag >{{scope.row.groupName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="orderStartingTime" label="行程日期" width="300">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderStartingTime}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="orderAmount" label="支付金额" width="150">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderAmount}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="150">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderStatus}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200">
          <template slot-scope="scope">
          <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                style="margin-left: 0px"
                >删除</el-button
              >
              </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>
    <el-tab-pane>
      <span slot="label">
        <svg-icon icon-class="dujia"/>{{"\xa0\xa0"}}待支付</span>

      <el-table :data="noPayOrders" style="width: 100%">
        <el-table-column prop="groupName" label="订单信息" width="450">
          <template slot-scope="scope">
            <el-tag >{{scope.row.groupName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="orderStartingTime" label="行程日期" width="300">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderStartingTime}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="orderAmount" label="支付金额" width="150">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderAmount}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="150">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderStatus}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200">
          <template slot-scope="scope">
          <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                style="margin-left: 0px"
                >删除</el-button
              >
              </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>

    <el-tab-pane>
      <span slot="label">
        <svg-icon icon-class="jingdian" />{{"\xa0\xa0"}}已支付</span>
      
      <el-table :data="payOrders" style="width: 100%">
        <el-table-column prop="groupName" label="订单信息" width="450">
          <template slot-scope="scope">
            <el-tag >{{scope.row.groupName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="orderStartingTime" label="行程日期" width="300">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderStartingTime}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="orderAmount" label="支付金额" width="150">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderAmount}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="150">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderStatus}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200">
          <template slot-scope="scope">
          <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                style="margin-left: 0px"
                >删除</el-button
              >
              </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>
<el-tab-pane>
      <span slot="label">
        <svg-icon icon-class="jingdian" />{{"\xa0\xa0"}}待出行</span>
      
      <el-table :data="noGoOrders" style="width: 100%">
        <el-table-column prop="groupName" label="订单信息" width="450">
          <template slot-scope="scope">
            <el-tag >{{scope.row.groupName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="orderStartingTime" label="行程日期" width="300">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderStartingTime}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="orderAmount" label="支付金额" width="150">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderAmount}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="150">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderStatus}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200">
          <template slot-scope="scope">
          <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                style="margin-left: 0px"
                >删除</el-button
              >
              </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>

    <el-tab-pane>
      <span slot="label">
        <svg-icon icon-class="youji" />{{"\xa0\xa0"}}待点评</span>
      
      <el-table :data="noCommentOrders" style="width: 100%" >
        <el-table-column prop="groupName" label="订单信息" width="450">
          <template slot-scope="scope">
            <el-tag >{{scope.row.groupName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="orderStartingTime" label="行程日期" width="300">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderStartingTime}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="orderAmount" label="支付金额" width="150">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderAmount}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="150">
          <template slot-scope="scope">
            <el-link type="primary">{{scope.row.orderStatus}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="400"
              trigger="click">
              <div class="block">
                <span class="demonstration">分数</span>
                <el-rate v-model="mark"></el-rate>
              </div>
              <el-divider></el-divider>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="content">
              </el-input>
            <el-button type="primary" size="mini" style="margin-top: 10px;float:right" @click="addComment(scope.row.orderId,scope.row.productId,scope.$index)" >提交</el-button>
              <el-button type="primary" size="mini" slot="reference">点评</el-button>
            </el-popover>
            
          <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                style="margin-left: 5px"
                >删除</el-button
              >
              </template>
        </el-table-column>

      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {getAllOrderById} from '@/api/order'
import {getNoCommentOrder} from '@/api/order'
import {getNotPayOrder} from '@/api/order'
import {getPayOrder} from '@/api/order'
import {getNoGoOrder} from '@/api/order'
import {deleteOrder} from '@/api/order'
import {addComment} from '@/api/pcomment'

export default {
    data(){
        return{
            userId: "",
            mark:0,
            content:"",
            allOrders:[{
                orderId:'',
                groupName:'',
                orderStartingTime:'',
                orderAmount:'',
                orderStatus:'',
            }],
            noCommentOrders:[{
               orderId:'',
                groupName:'',
                orderStartingTime:'',
                orderAmount:'',
                orderStatus:'',
            }],
            noPayOrders:[{
                orderId:'',
                groupName:'',
                orderStartingTime:'',
                orderAmount:'',
                orderStatus:'',
            }],
            payOrders:[{
                orderId:'',
                groupName:'',
                orderStartingTime:'',
                orderAmount:'',
                orderStatus:'',
            }],
            noGoOrders:[{
                orderId:'',
                groupName:'',
                orderStartingTime:'',
                orderAmount:'',
                orderStatus:'',
            }],
            activeName:'second'
        }
    },
    created(){
        this.showAllOrder()
    },

    methods: {
        handleClick(tab, event) {
        console.log(tab, event);
      },
        showAllOrder(){
            this.userId = this.$store.getters.userId
            getAllOrderById(this.userId).then(res => {
                console.log(res);
                this.allOrders = res.data;
            }),
            
            getNoCommentOrder(this.userId).then(res =>{
                console.log(res);
                this.noCommentOrders = res.data;
            }),
            getNotPayOrder(this.userId).then(res =>{
                console.log(res);
                this.noPayOrders = res.data;
            }),
            getPayOrder(this.userId).then(res =>{
                console.log(res);
                this.payOrders = res.data;
            }),
            getNoGoOrder(this.userId).then(res =>{
                console.log(res);
                this.noGoOrders = res.data;
            })
        },
        handleDelete(row){
          deleteOrder(row.orderId).then(res =>{
            console.log(res);
            alert(res.data)
          }),
          this.userId = this.$store.getters.userId
            getAllOrderById(this.userId).then(res => {
                console.log(res);
                this.allOrders = res.data;
            }),
            
            getNoCommentOrder(this.userId).then(res =>{
                console.log(res);
                this.noCommentOrders = res.data;
            }),
            getNotPayOrder(this.userId).then(res =>{
                console.log(res);
                this.noPayOrders = res.data;
            }),
            getPayOrder(this.userId).then(res =>{
                console.log(res);
                this.payOrders = res.data;
            }),
            getNoGoOrder(this.userId).then(res =>{
                console.log(res);
                this.noGoOrders = res.data;
            })
        },
        addComment(oid,pid,row){
          let a = {}
          a.id = pid
          a.uid = this.userId
          a.mark = this.mark
          a.oid = oid
          a.content = this.content
          console.log(a)
          console.log(row)
          addComment(a).then(res =>{
            this.$message({
                    showClose: true,
                    type:'success',
                    message:'点评成功'
                })
          })
          this.noCommentOrders.splice(row,1)
          this.mark = 0
          this.content = ""
        }
        
    },
}
</script>

<style>

</style>